// 表格
.table {
  &__th,
  &__tr {
    display: flex;
    border-bottom: 1px solid #2d3245;
  }

  &__th {
    font-size: 14px;
    text-align: center;
  }

  &__td {
    @extend .flex-center;
    display: flex;
    flex: 1 0;
    min-height: 35px;
    padding: 5px 0;
    word-break: break-all;
    border-right: 1px solid #2d3245;
  }

  &--border {
    @extend .bd;

    .table__th,
    .table__tr {
      &:not(:last-child) {
        .table__td {
          @extend .bd-bottom;
        }
      }
    }

    .table__td {
      &:not(:last-child) {
        @extend .bd-right;
      }
    }
  }

  &--stripe {
    .table__tr {
      &:nth-child(2n) {
        background-color: var(--color-bg);
      }
    }
  }

  &--white {
    .table__th,
    .table__tr {
      background-color: white;
      margin-top: 10px;
    }
  }
}

// 横向滚动列表
.scroll-x {
  white-space: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory; // 滚动完毕后，让子元素拥有一个停靠的边界（强制停靠）

  &__item {
    display: inline-block;
    scroll-snap-align: center; // 父元素滚动完毕后，子元素停靠在左侧

    &:not(:last-child) {
      margin-right: 15px;
    }
  }
}

// 数据列表
.list {
  line-height: 2;

  .list__item {
    .item {
      .label {
        &::after {
          content: '：';
        }
      }
    }
  }

  &--50 {
    .list__item {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;

        .label {
          &::after {
            content: '：';
          }
        }
      }
    }
  }
}

// 圆点
.dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);

  &--white {
    background-color: white;
  }

  &--disabled {
    background-color: var(--color-border);
  }

  &--small {
    width: 7px;
    height: 7px;
  }
}

// 标题
.title {
  min-width: 150px;
  margin: 0 auto 15px;
  font-size: 16px;
  text-align: center;
  background-color: rgba($color: white, $alpha: 0.1);
  padding: 2px 20px;
  border-radius: 100px;
}
